<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="time-header-tips">
        <div class="mr20">
          本学期共
          <i>{{ allDay.length }}</i>天，上课<i>{{ allDay.length - activeDay.length }}</i>天，不上课<i>{{ activeDay.length }}</i>天
        </div>
        <el-button type="primary" size="small" @click="savelineFn()" plain>保存并提交</el-button>
      </div>
      <div v-if="mouth_body" class="rili-content">
        <div class="time_content" v-for="(item,index) in mouth_body" :key="index+'mouth'">
          <div class="time_content-in">
            <div class="time_content-header-title">
              {{ item.year }}-{{ item.mouth }}
            </div>
            <div class="time_content-header">
              <div v-for="(week, week_index) in weekday" :key="week_index+'week'" class="week-list">
                {{ week }}
              </div>
            </div>
            <div class="time_content-body">
              <div class="day-list" v-for="start_box in item.start" :key="start_box+'start'"></div>
              <div class="day-list" v-for="(day, day_index) in item.day" :key="day_index+'day'" @click="getDayFn(day)">
                <p class="day-list-day">{{ day.info.day }}</p>
                <p class="day-list-test" v-if="activeDay.indexOf(day.day)!==-1">休</p>
              </div>
              <div class="day-list" v-for="end_box in item.end" :key="end_box+'end'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {semesterEdit, holidayEdit, holidayNow} from '@/api/admin/setting'

export default {
  data() {
    return {
      lookStatus: false,
      weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      mouth_body: null,
      activeDay: [],
      allDay: [],
      start_time: '', // 开学时间
      end_time: '', // 放假时间
      dayId: 0
    }
  },
  computed: {
    ...mapGetters(['configData']),
  },
  created() {
    // this.getAllDate('2022-09-01', '2022-10-10', 2)
    this.getAllTimeFn()
  },
  methods: {
    savelineFn() {
      let activeDay = []
      for (let item of this.allDay) {
        if (this.activeDay.indexOf(item.day) === -1) {
          activeDay.push(item.day)
        }
      }
      console.log('全部天数：', this.allDay)
      console.log('放假日期：', this.activeDay)
      console.log('上班日期：', activeDay)
      // id 	整型 	必填 	1 	- 	ID
      // attend 	整型 	必填 	1 	- 	上课
      // holiday 	整型 	必填 	1 	- 	放假
      let data_ = {
        id: this.dayId,
        attend: activeDay.join(','), //上课
        holiday: this.activeDay.join(',') // 放假
      }
      holidayEdit(data_).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.$message.success(res.msg)
          this.getAllTimeFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getAllTimeFn() {
      semesterEdit().then(res => {
        console.log('ressemesterEdit:', res)
        if (res.vo.time && res.vo.end_time) {
          this.start_time = res.vo.time // 开学时间
          this.end_time = res.vo.end_time // 放假时间
          this.holidayNowFn()
        } else {
          this.$confirm('未设置开学/放假日期，请联系管理员！', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      })
    },
    getDayFn(option) {
      let n = this
      if (this.activeDay.indexOf(option.day) === -1) {
        this.activeDay.push(option.day)
      } else {
        this.activeDay.splice(n.activeDay.indexOf(option.day), 1)
      }
    },
    // 获取后台设置
    holidayNowFn() {
      holidayNow().then(res => {
        console.log('当前设置：', res)
        if (!res.detail) {
          this.getAllDate(1)
        } else {
          this.dayId = res.detail.id
          this.activeDay = res.detail.holiday.split(',')
          this.getAllDate(2)
        }
      })
    },
    getAllDate(type) {
      let start = this.start_time;
      let end = this.end_time;
      let n = this
      let format = (time) => {
        let ymd = ''
        let mouth = (time.getMonth() + 1)
        let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
        ymd += time.getFullYear() + '-' // 获取年份。
        ymd += mouth + '-' // 获取月份。
        ymd += day // 获取日。
        //m.df格式
        return {all: ymd, year: time.getFullYear(), mouth: mouth, day: day} // 返回日期。
      }
      let dateArr = []
      let startArr = start.split('-')
      let endArr = end.split('-')
      let db = new Date()
      db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
      db.setHours(0, 0, 0, 0)
      let de = new Date()
      de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
      de.setHours(0, 0, 0, 0)
      let unixDb = db.getTime()
      let unixDe = de.getTime()
      let stamp
      let oneDay = 24 * 60 * 60 * 1000;
      for (stamp = unixDb; stamp <= unixDe;) {
        let f = new Date(parseInt(stamp));
        let week = f.getDay()//计算出星期几
        if (type === 1) {
          if (n.weekday[week] === '星期日' || n.weekday[week] === '星期六') {
            this.activeDay.push(format(f).all)
          }
        }
        dateArr.push({day: format(f).all, week: n.weekday[week], info: format(f)})
        stamp = stamp + oneDay
      }
      this.allDay = JSON.parse(JSON.stringify(dateArr))
      this.getWeekFn(dateArr)
      return dateArr
    },
    // 重组数据内容
    getWeekFn(dateArr) {
      let year_mouth = {}
      for (let item of dateArr) {
        let a_ = item.day.split('-');
        if (year_mouth[a_[1] + '月']) {
          year_mouth[a_[1] + '月'].push(item)
        } else {
          year_mouth[a_[1] + '月'] = [item]
        }
      }
      let list_ = []
      for (let item in year_mouth) {
        list_.push({
          mouth: item,
          dayTime: year_mouth[item][0].day,
          year: year_mouth[item][0].info.year,
          day: year_mouth[item],
          start: this.weekday.indexOf(year_mouth[item][0].week),
          end: 6 - this.weekday.indexOf(year_mouth[item][year_mouth[item].length - 1].week),
        })
      }
      this.mouth_body = JSON.parse(JSON.stringify(list_))
    }
  }
}
</script>

<style scoped>
.rili-content {
  overflow: hidden;
}

/*start*/
.time_content-header-title {
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.time_content {
  height: 360px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.time_content-in {
  width: 353px;
  border: 1px solid #ddd;
  background: #fff;
}

.time_content-header {
  background: #ddd;
  overflow: hidden;
}

.week-list {
  width: 50px;
  height: 30px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.time_content-body {
  overflow: hidden;
}

.day-list {
  width: 50px;
  height: 50px;
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.day-list:hover {
  background: #96e570 !important;
}

.day-list:nth-child(7n-6) {
  background: #eee;
}

.day-list:nth-child(7n) {
  background: #eee;
  border-right: none;
}

.day-list-day {
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 100%;
}

.day-list-test {
  width: 15px;
  height: 15px;
  background: red;
  font-size: 10px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
}


.time-header-tips {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.time-header-tips i {
  color: #ef6f14;
  font-size: 16px;
  margin: 0 3px;
  font-weight: bold;
}

/*end*/
</style>
